* {
    margin : 0;
    padding: 0
}

a {
    text-decoration: none;
    color          : #333
}

body {
    background-color: #252525
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1
}

.index {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column
}

.entry {
    color        : #f3f3f3;
    padding      : 4vh 14px;
    border       : 1px solid #999;
    margin       : 1vh 14vw;
    border-radius: 6px;
    font-size    : 1.1rem
}

@media(max-width:1000px) {
    .entry {
        font-size: 3rem
    }
}

.entry:hover {
    background-color: #393939
}

.jm-container {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction   : row;
    flex-direction       : row;
    -webkit-box-pack     : center;
    -ms-flex-pack        : center;
    justify-content      : center;
    margin               : 1vh 0;
    min-width            : 930px
}

.jiaming-box {
    color    : #909090;
    margin   : 0 2vw;
    font-size: 2rem
}

.toggle-button {
    width             : 120px;
    height            : 46px;
    font-size         : 1.2rem;
    color             : #333;
    font-weight       : 600;
    border            : 0;
    outline           : 0;
    border-radius     : 8px;
    -webkit-box-shadow: 0 4px 2px #333;
    box-shadow        : 0 4px 2px #333;
    background-color  : #666;
    -webkit-transition: .2s;
    -o-transition     : .2s;
    transition        : .2s;
    overflow          : hidden
}

.toggle-button:hover {
    background-color  : #fcc;
    -webkit-transition: .2s;
    -o-transition     : .2s;
    transition        : .2s
}

.toggle-button:active {
    -webkit-transform : translateY(2px);
    -ms-transform     : translateY(2px);
    transform         : translateY(2px);
    -webkit-box-shadow: 0 2px 2px #111;
    box-shadow        : 0 2px 2px #111
}

.toggle-button span {
    display           : inline-block;
    position          : relative;
    -webkit-transition: .6s;
    -o-transition     : .6s;
    transition        : .6s
}

.toggle-button span:after {
    content           : "假名";
    right             : -50px;
    position          : absolute;
    opacity           : 0;
    -webkit-transition: .4s;
    -o-transition     : .4s;
    transition        : .4s
}

.toggle-button:hover span {
    padding-right: 39px
}

.toggle-button:hover span:after {
    padding-right     : 50px;
    opacity           : 1;
    -webkit-transition: .6s;
    -o-transition     : .6s;
    transition        : .6s
}